---
id: 代码拆分
title: 优化-代码拆分(Code Splitting)
---

### 拆分的作用

- 抽离公共代码减小体积（A 模块和 B 模块同时引入 C 模块 可以将 C 模块抽离为独立的文件）
- 项目引入的第三方包多了后，webpack 会将它们打在一起，导致体积很大，就算其中的一个包当前页面没用到，但都打在一起了，也被迫加载了进来。导致加载时间变长。

```js
import _ from "lodash";
console.log(_.xx);
```

webpack 中实现代码分割
同步代码：只需要在 webpack 配置中 optimization
异步代码（import）：异步代码，无需做任何配置，会自动进行代码

## SplitChunksPlugin 配置参数详解

开箱即用的 SplitChunksPlugin 对于大部分用户来说非常友好。
[官网 SplitChunksPlugin 配置](https://webpack.docschina.org/plugins/split-chunks-plugin#root)

```js
module.exports = {
  // webpack.config.js
  optimization: {
    splitChunks: {
      chunks: "all", // all , async, sync 3个选项
      minSize: 20000,
      minRemainingSize: 0,
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      enforceSizeThreshold: 50000,
      cacheGroups: {
        // 缓存分组
        defaultVendors: {
          name: "vendor", //chunk 名称
          test: /[\\/]node_modules[\\/]/, // 匹配的文件路径
          priority: -10, // 权限更高，优先抽离，重要！
          reuseExistingChunk: true,
          minsize: 0, // 公共大小限制
          minChunks: 2, // 最少复用过几次才拆分
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};
```

### 配置参考

```js

{
      chunks: 'all',
      minSize: 20000, // 允许新拆出 chunk 的最小体积，也是异步 chunk 公共模块的强制拆分体积
      maxAsyncRequests: 6, // 每个异步加载模块最多能被拆分的数量
      maxInitialRequests: 6, // 每个入口和它的同步依赖最多能被拆分的数量
      enforceSizeThreshold: 50000, // 强制执行拆分的体积阈值并忽略其他限制
      cacheGroups: {
        // assets: {
        //   // assetsImgSvg 单独拆包
        //   name: 'chunk-assets',
        //   test: /[\\/]src[\\/]assets/,
        //   priority: 20, // 权重
        //   chunks: 'all' // 只打包按需引入的模块
        // },
        // components: {
        //   // components 单独拆包
        //   name: 'chunk-components',
        //   test: /[\\/]src[\\/]components/,
        //   priority: 20, // 权重
        //   chunks: 'all' // 只打包按需引入的模块
        // },
        elementplus: {
          // elementplus 单独拆包
          name: 'chunk-elementplus',
          test: /[\\/]node_modules[\\/]element-plus/,
          priority: 20, // 权重要大于 libs
          chunks: 'all' // 只打包按需引入的模块
        },
        echarts: {
          // echarts 单独拆包
          name: 'chunk-echarts',
          test: /[\\/]node_modules[\\/]echarts/,
          priority: 21, // 权重要大于 libs
          chunks: 'all' // 只打包按需引入的模块
        },
        zrender: {
          // zrender 单独拆包
          name: 'chunk-zrender',
          test: /[\\/]node_modules[\\/]zrender/,
          priority: 22, // 权重要大于 libs
          chunks: 'all' // 只打包按需引入的模块
        },
        lodash: {
          // lodash 单独拆包
          name: 'chunk-lodash',
          test: /[\\/]node_modules[\\/]lodash/,
          priority: 22, // 权重要大于 libs
          chunks: 'all' // 只打包按需引入的模块
        },
        xlsx: {
          // xlsx 单独拆包
          name: 'chunk-xlsx',
          test: /[\\/]node_modules[\\/]xlsx-populate[\\/]lib/,
          priority: 22, // 权重要大于 libs
          chunks: 'all' // 只打包按需引入的模块
        },
        bn: {
          // lodash 单独拆包
          name: 'chunk-bn',
          test: /[\\/]node_modules[\\/]bn.js[\\/]lib/,
          priority: 22, // 权重要大于 libs
          chunks: 'all' // 只打包按需引入的模块
        },
        libs: {
          // 第三方库
          name: 'chunk-libs',
          test: /node_modules/,
          priority: 10
          // chunks: "initial" // 只打包初始时依赖的第三方
        },
        commons: {
          // 公共模块包
          name: 'chunk-commons',
          minChunks: 2,
          priority: 0,
          reuseExistingChunk: true
        }
      }
    }

```
